<template>
	<view class="box">
		<view class="maskBox">
			<video class="imgs" style="width: 100%;height:100%;" :loop="true" :direction="-90" :src="imgUrl"
				:autoplay="true" mode=""></video>
		</view>
		<view class="text">
			<u-icon name="info-circle-fill" style="margin-right: 5rpx;"></u-icon>
			该内容仅供娱乐
		</view>
		<view class="btnBox">
			<view class="btn">

				<view class="button2" v-if="iphone">
					苹果暂不支持下载
				</view>
				<view class="button2" v-else @click="production">
					立即制作
				</view>
			</view>
		</view>
		<view class="goback" @click="goback">
			<image class="right" src="https://tb.wuyouzhuan888.com/applet-icon/l4.png"
				style="width: 24rpx;height: 28rpx;margin-right: 10rpx;">
				更多模板
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				videoId: '',
				coins: 0,
				iphone: false,
				creatorId: 0,
				accountId: 0,
				movId: 0,
				taskId: 0,
				collectionId: 0,
				urlId: 0,
				launchQuery: {},
				callbackId: 0,
				categoryId: 0
			}
		},
		onLoad(options) {
			this.videoId = options.videoId
			this.creatorId = options.creatorId ?? 0;
			this.accountId = options.accountId ?? 0;
			this.movId = options.movId ?? 0;
			this.taskId = options.taskId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.urlId = options.urlId ?? 0;
			// 场景
			this.callbackId = options.callbackId ?? 0
			//分类
			this.categoryId = options.categoryId ?? 0
			if (uni.getSystemInfoSync().osName == 'ios') {
				this.iphone = true
			}
		
			this.getVideo()
		},
		methods: {
			goback() {
				uni.switchTab({
					url: '/pages/sys/video/index'
				})
			},
			production() {
				uni.navigateTo({
					url: '/pages/sys/video_bags/video_text?videoId=' + this.videoId +
						'&creatorId=' + this.creatorId +
						'&accountId=' + this.accountId +
						"&callbackId=" + this.callbackId +
						'&movId=' + this.movId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						'&taskId=' + this.taskId
				})
			},
			getVideo() {
				let params = {
					videoId: this.videoId,
					creatorId: this.creatorId,
					accountId: this.accountId,
					movId: this.movId,
					taskId: this.taskId,
					collectionId: this.collectionId,
					urlId: this.urlId,
					callbackId: this.callbackId,
					categoryId: this.categoryId,
					name: uni.getSystemInfoSync().osName
				}
				this.$u.api.video.getVideoInfo(params).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.imgUrl = res.data.url
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.maskBox {
		width: 100%;
		height: 85%;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;

		.imgs {
			width: 100%;
			height: 750rpx;
		}
	}

	.btnBox {
		width: 100%;
		height: 15%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #1b1b1d;
		bottom: 0;

		.btn {
			width: 90%;
			height: 96rpx;

			.button {
				height: 96rpx;
				border-radius: 15rpx;
				font-size: 32rpx;
				background-image: url('https://tb.wuyouzhuan888.com/applet-icon/205d3840e6440de73b167c2618bddbd6.png');
				background-size: 100% 100%;
				background-repeat: repeat-y;
				color: #FFFFFF;
				position: relative;


				.button1 {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
				}

				.coins {
					position: absolute;
					font-size: 22rpx;
					text-align: center;
					left: 50%;
					transform: translateX(-50%);
					bottom: 5rpx;
				}
			}

			.button2 {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 96rpx;
				border-radius: 15rpx;
				font-size: 36rpx;
				background-image: url('https://tb.wuyouzhuan888.com/applet-icon/205d3840e6440de73b167c2618bddbd6.png');
				background-size: 100% 100%;
				background-repeat: repeat-y;
				color: #FFFFFF;

				.coins {
					font-size: 22rpx;
					text-align: center;
				}
			}

			button::after {
				border: none;
			}
		}
	}

	.text {
		position: absolute;
		color: #969696;
		bottom: 19%;
		font-size: 16rpx;
		right: 20rpx;
	}

	.goback {
		position: fixed;
		top: 8%;
		left: 0;
		background-image: url('https://tb.wuyouzhuan888.com/applet-icon/xuanting.png');
		height: 72rpx;
		width: 204rpx;
		background-size: 100% 100%;
		font-size: 32rpx;
		padding: 0 15rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>